<template>
	<div class='home-projects'>
		<view
			class="project"
			v-for="project in projects"
			:key="project.id"
		>
			<ProjectCard
				:project="project"
				@click="$router.navigateToProject(project.id)"
			/>
		</view>
		<aha-loadmore :status="loadStatus" />
	</div>
</template>

<script>
import { getRecommendProject } from '@/api/project.js'
import { adaptProjectCard } from '@/utils/adaptive'
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      projects: [],
      loadStatus: 'nomore'
    }
  },
  created() {
    this.loadProjects(1)
  },
  methods: {
    async loadProjects(pageNum = this.pageNum) {
      try {
        this.projects = await this.$pageDataSet({
          request: async() => await getRecommendProject({
            pageNum,
            pageSize: this.pageSize,
          }),
          pageNum,
          key: 'projects',
          adapt: (item) => adaptProjectCard(item.data)
        })
        console.log(this.projects)
        console.log(this.loadStatus, this.total)
      } catch (err) {
        console.log(err)
      }
      uni.stopPullDownRefresh()
    }
  }
}
</script>

<style lang='scss' scoped>
.home-projects {
  .project {
    position: relative;
    padding-top: 15px;
    margin: 0 40rpx;

    @include listRadius(-10px, -30px, -30px, 20px, $primary5);
  }
}
</style>
